<template>
  <div class="role-management">
    <!-- 页面标题和操作按钮 -->
    <div class="page-header">
      <!-- <h1>角色管理</h1> -->
      <el-button type="primary" @click="handleAdd"> <Plus /> 新增角色 </el-button>
    </div>

    <!-- 角色列表表格 -->
    <el-card>
      <el-table :data="roleList" border stripe style="width: 100%">
        <el-table-column prop="indexId" label="角色ID" width="100" align="center"></el-table-column>
        <el-table-column prop="name" label="角色名称" width="180" align="center"></el-table-column>
        <el-table-column prop="description" label="角色描述" align="center"></el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope.row)"> 编辑 </el-button>
            <el-button
              type="danger"
              size="small"
              @click="handleDelete(scope.row.id)"
              style="margin-left: 5px"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增/编辑角色对话框 -->
    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑角色' : '新增角色'" width="500px">
      <el-form ref="roleFormRef" :model="roleForm" :rules="formRules" label-width="100px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="roleForm.name" placeholder="请输入角色名称" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input
            v-model="roleForm.description"
            placeholder="请输入角色描述（可选）"
            type="textarea"
            rows="3"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit"> 确认 </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { roleApi } from '@/api'

// 角色列表数据（新增 indexId 用于显示）
const roleList = ref([])

// 对话框状态
const dialogVisible = ref(false)
const isEdit = ref(false)
const currentRoleId = ref('') // 当前操作的角色 ID（Guid）

// 角色表单数据
const roleForm = reactive({
  name: '',
  description: '',
})

// 表单验证规则
const formRules = reactive({
  name: [
    { required: true, message: '请输入角色名称', trigger: 'blur' },
    { max: 50, message: '角色名称不能超过50个字符', trigger: 'blur' },
  ],
})

// 表单引用
const roleFormRef = ref(null)

// 页面加载时初始化数据
onMounted(async () => {
  await fetchAllRoles()
})

// 获取所有角色（添加前端显示用的 indexId）
const fetchAllRoles = async () => {
  try {
    const res = await roleApi.getAllRoles()
    // 处理不同的API响应格式
    const rolesData = res.data || res || []
    roleList.value = rolesData.map((role, index) => ({
      ...role,
      indexId: index + 1, // 前端自增序号（显示用）
    }))
  } catch (err) {
    console.error('获取角色列表失败:', err)
    ElMessage.error('获取角色列表失败：' + (err.response?.data?.message || err.message))
  }
}

// 新增角色
const handleAdd = () => {
  isEdit.value = false
  roleForm.name = ''
  roleForm.description = ''
  dialogVisible.value = true
}

// 编辑角色
const handleEdit = (row) => {
  isEdit.value = true
  currentRoleId.value = row.id
  roleForm.name = row.name
  roleForm.description = row.description || ''
  dialogVisible.value = true
}

// 提交角色表单（新增/编辑）
const handleSubmit = async () => {
  try {
    await roleFormRef.value.validate()

    if (isEdit.value) {
      await roleApi.updateRole(currentRoleId.value, roleForm)
      ElMessage.success('角色更新成功')
    } else {
      await roleApi.createRole(roleForm)
      ElMessage.success('角色创建成功')
    }

    dialogVisible.value = false
    fetchAllRoles()
  } catch (err) {
    if (err.name !== 'ValidationError') {
      ElMessage.error('操作失败：' + (err.response?.data?.message || err.message))
    }
  }
}

// 删除角色
const handleDelete = async (id) => {
  try {
    await ElMessageBox.confirm('确定要删除该角色吗？', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })

    await roleApi.deleteRole(id)
    ElMessage.success('角色删除成功')
    fetchAllRoles()
  } catch (err) {
    if (err !== 'cancel') {
      ElMessage.error('删除失败：' + (err.response?.data?.message || err.message))
    }
  }
}
</script>

<style scoped>
/* 样式保持不变 */
.role-management {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}
</style>
